<template>
  <div class="wrapper">
    <div class="main">
      <input v-fixedInput type="text" placeholder="请输入核销码" v-model="code">
      <div class="btn submit saclebtn" @click="submit">提 交</div>
      <div class="btn clear saclebtn" @click="clear">清 空</div>
    </div>
    <Bottom :baseText="baseText"></Bottom>
  </div>
</template>
<script>
import request from "@/utils/request";
import utils from "@/utils/utils";
import * as config from "./config";
import { MessageBox } from "mint-ui";
import Bottom from "@/components/common/Bottom";
export default {
  data() {
    return {
      code: "",
      baseText: config.BASE_TEXT,
      isClick: false
    };
  },
  components: {
    Bottom: Bottom
  },
  methods: {
    clear(){
      this.code="";
    },
    submit() {
      let that = this;
      if (that.code.length == 0) {
        MessageBox.alert("请输入核销码");
      } else {
        that.verificationCode().then(function(data) {
          if (data.flag) {
            MessageBox.alert("核销正确！");
          } else {
            MessageBox.alert("核销失败，请检查是否输入错误或已核销过");
          }
        });
      }
    },
    verificationCode() {
      let that = this;
      return new Promise(function(resolve, reject) {
        request
          .post(
            `${that.global.API_ACT_URL}verificationCode?activityId=${
              config.activityId
            }&code=${that.code}`,
            {}
          )
          .then(function(data) {
            resolve(data);
          });
      });
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/mixins.styl';
@import 'comm.styl';

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url('http://assets.rurushishi.com/activies/zdfzh/voice_bg.jpg') repeat center center;
  background-size: 100% 100%;
}

.main {
  height: 1rem;
  width: 70%;
  border: 1px solid #fff;
  position: absolute;
  top: 4rem;
  left: 15%;
  border-radius: 0.3rem;
}

input {
  color: #ffffff;
  width: 92%;
  padding-left: 6%;
  height: 1rem;
  line-height: 1rem;
  font-size 0.6rem
  background-color: transparent;
  border: none;
}

input::-webkit-input-placeholder {
  color: #ffffff;
  font-size 0.6rem
}

.btn {
  width: 100%;
  background-color: #fff;
  border-radius: 0.3rem;
  font-size: 0.32rem;
  height: 0.8rem;
  margin: 0.5rem auto;
  text-align: center;
  line-height: 0.8rem;
  color: #1b2186;
  font-weight: 600;
}
.btn.submit{
  
}
</style>